<template>
  <div id="myLineChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
const props = defineProps({
  listData:{
    type: Array,
  }
})
const { listData } = toRefs(props)

onMounted(() => { // 需要获取到element,所以是onMounted的Hook
  watch(()=>props.listData,()=>{
    const xAxisArr = ref([])
    const seriesArr = ref([])
    xAxisArr.value = listData.value.map(item=>{return item.years})
    seriesArr.value = listData.value.map(item=>{return item.totalEarthquakeSetNum})
    let myChart = echarts.init(document.getElementById("myLineChart"));
    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        },
        show: false
      },
      grid: {
        top: '8%',
        left: 0,
        right: 0,
        containLabel: true,
      },
      // x轴
      xAxis: {
        type: 'category',
        data: xAxisArr.value,
        // x轴样式
        axisLine: {
          lineStyle: {
            color: '#30374A',
            show: false,
          }
        },
        //x轴文字的配置
        axisLabel: {
          textStyle: {
            color:'rgba(255, 255, 255, 0.5)',
          },
        },
      },
      // y轴
      yAxis:{
        type:'value',
        min: 0,
        // max: 100,
        // y轴样式
        axisLine: {
          show: false,
          lineStyle: {
            color: 'transparent'
          }
        },
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color:'rgba(255,255,255,0.5)',
          },
        },
        // 背景线条
        splitLine: {
          lineStyle: {
            color: 'rgba(71,90,219,0.5)',type: 'dashed'
          }
        }
      },
      series: [
        {
          type: "bar",
          data: seriesArr.value,
          barWidth: 10,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#46FFFF' },
              { offset: 1, color: '#0775FE' }
            ]),
          },
          showBackground:true,
          backgroundStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(71, 90, 219, 0.2)' },
              { offset: 1, color: 'rgba(71, 90, 219, 0)' }
            ]),
          },
          label: {
            show: true,
            color: '#46FFFF',
            position: 'top',
          },
        },
        {
          type: "line",
          data: seriesArr.value,
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 12, //折线点的大小
          itemStyle : { 
            color:'#46FFFF',
            borderColor:'#0775FE',
            borderWidth: 3,
            boxShadow: '0px 0px 6px 1px rgba(70,255,255,0.8)',
          },
          lineStyle:{ 
            color:'#0775FE', //改变折线颜色
            width:2,//改变粗细  
          }
        },
      ],
      // 刻度线
      axisTick: {
          show: false,
          length: 0,
          lineStyle: {
              color:'transparent',
              type: 'solid',
              width: 1
          },
          alignWithLabel: false 
      },
    });
    window.onresize = function () { // 自适应大小
      myChart.resize();
    };
  })
})
</script>
<style lang='scss' scoped>
#myLineChart{
  width: 420px;
  height: 245px;
  margin: 20px auto 0;
  font-size: 14px;
}
</style>